<template>
  <div class="teacher-introduce-swipe">
    <van-swipe class="teacher-swipe">
      <van-swipe-item
        v-for="item in teacherGroup"
        :key="item.TeacherImg"
      >
        <router-link
          v-for="(group, index) in item"
          :key="index"
          :to="{name: 'teacherInfo',query: {teacherId: group.TeacherId}}"
          tag="div"
          class="teacher-group"
        >
          <div class="teacher-head-img-box">
            <Avatar
              :src="group.TeacherImg"
              class="teacher-head-img"
            />
          </div>
          <div class="teacher-info-box">
            <div class="teacher-name">
              {{ group.TeacherName.length > 4 ? group.TeacherName.substring(0,4) + '...'
                : group.TeacherName }}
            </div>
            <div class="course-features">
              {{ group.CourseFeatures }}
            </div>
          </div>
        </router-link>
      </van-swipe-item>
    </van-swipe>
    <div
      v-if="teacherGroup.length < 2"
      class="van-swipe__indicators"
    >
      <i class="van-swipe__indicator van-swipe__indicator--active" />
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {
    Avatar: () => import(/* webpackChunkName: "publicComp" */ 'components/Mine/Avatar.vue'),
  },
  // eslint-disable-next-line vue/require-default-prop
  // eslint-disable-next-line vue/require-prop-types
  props: ['teacherList'],
  data () {
    return {
      teacherGroup: [],
    }
  },
  created () {
    const teacherGroup = []
    for (let i = 0, l = this.teacherList.length; i < l;) {
      teacherGroup.push(this.teacherList.slice(i, i + 2))
      i += 2
    }
    this.$set(this.$data, 'teacherGroup', teacherGroup)
  },
  methods: {
  },
})
</script>
<style lang="scss" scoped>
.teacher-introduce-swipe {
  position: relative;
  /deep/ {
    .van-swipe__indicators {
      padding: 0 5px;
      bottom: 0;
    }
    .van-swipe__indicator {
      background-color: $primary-web;
    }
    .van-swipe__indicator--active {
      width: 40px;
      background-color: $primary-web;
      border-radius: 10px;
    }
  }
}
.teacher-group {
  width: calc(48% - 3px);
  height: 180px;
  margin: 6px 4% 40px 3px;
  display: inline-block;
  border-radius:3px;
  box-shadow:0px 0px 6px 0px rgba(153,153,153,0.2);
}
.teacher-group:nth-child(2n) {
  margin-right: 0;
  margin-left: 0;
}
.teacher-head-img-box,.teacher-info-box {
  display: inline-block;
  height: 102px;
  vertical-align: text-top;
}
.teacher-head-img-box {
  margin: 39px 10px;
}
.teacher-head-img {
  width: 102px !important;
  height: 102px !important;
}
.teacher-name {
  padding-top: 39px;
  font-size: 30px;
  color: #333333;
  margin-bottom: 15px;
}
.course-features {
  width: 210px;
  font-size: 22px;
  line-height: 30px;
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;  // 控制多行的行数
  -webkit-box-orient: vertical;
}
</style>
